import React, {Component} from 'react';
import {Layout} from 'antd';
import './index.scss'
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import actionCreator from "../../store/actionCreator";
import MenuData from "../../assets/MenuData";
import {Breadcrumb} from 'antd';
import Goods from '../Goods/Goods'
const {Content} = Layout

class Contents extends Component {
  crumbFilters() {
    let {itemSelected, defaultCategory} = this.props
    let crumbInfo = {
      mainTitle: '',
      subTitle: ''
    }
    if (itemSelected.value) {
      MenuData.forEach((menuItem, menuIndex) => {
        if (menuItem.children && menuItem.children.length > 0) {
          menuItem.children.forEach((item, index) => {
            if (item.value === itemSelected.value) {
              crumbInfo = {
                mainTitle: menuItem.title,
                subTitle: item.title
              }
            }
          })
        }
      })
    } else {
      //default value
      crumbInfo = {
        mainTitle: defaultCategory.title,
        subTitle: ''
      }
    }
    return crumbInfo
  }
  
  render() {
    return (
      <Content className={'content_wrap'}>
        <div className="content_crumbs">
          <Breadcrumb>
            <Breadcrumb.Item>{this.crumbFilters().mainTitle}</Breadcrumb.Item>
            <Breadcrumb.Item>{this.crumbFilters().subTitle}</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <Goods/>
      </Content>
    );
  }
}

export default connect(state => state, (dispatch) => {
  return bindActionCreators(actionCreator, dispatch)
})(Contents);
